<template>
  <form @submit.prevent="handleSubmit" class="comment-form">
    <div class="form-group">
      <textarea
        v-model="content"
        placeholder="写下你的评论..."
        required
        rows="3"
      ></textarea>
    </div>
    <button type="submit" class="submit-btn">发表评论</button>
  </form>
</template>

<script setup>
import { ref } from 'vue'

const content = ref('')

const emit = defineEmits(['submit-comment'])

const handleSubmit = () => {
  emit('submit-comment', content.value)
  content.value = ''
}
</script>

<style scoped>
.comment-form {
  margin-bottom: 2rem;
}

.form-group {
  margin-bottom: 1rem;
}

textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  resize: vertical;
}

.submit-btn {
  padding: 0.5rem 1.5rem;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

.submit-btn:hover {
  background-color: #3aa876;
}
</style>